<template>
  <div class="main">
    <div class="swiper">
      <div class="left">
        <!--      <span class="iconfont "></span>-->
        <img src="../../assets/video/back.png" @click="goBack()" style="width: 15px;height: 15px;margin: 10px;"/>
        <!--        <i class="el-icon-arrow-left iconfont" @click="goBack()"></i>-->
      </div>
      <van-swipe :show-indicators="false">
        <van-swipe-item>
          <img src="../../assets/logo.png" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../assets/logo.png" alt="">
        </van-swipe-item>
      </van-swipe>
      <div class="product">
        <img src="../../assets/logo.png">
        <div class="desc">
          <div>【试吃】纤元力多高纤谷面条，糖友稳定...</div>
          <div>￥9.90</div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="title">
        <div class="yuan">李</div>
        <div class="info">
          <div>X56927598750</div>
          <div>2023-06-21 16:25</div>
        </div>
        <div class="btn">
          关注
        </div>
      </div>
      <div class="desc">口感很好，也很健康</div>
      <div class="pj">#纤元力面条 这款纤谷物挂面，我可以说他的口感非常好，非常适合哪些喜欢吃粗的人，每包挂面含有12可以上的鼓舞基本膳食纤维，这使得这总面相对于船用
      的面条更加健康，膳食纤维是一种低能量物质，它可以帮助维持肠道的正常功能。这对于人体是非常健康的，还含有小麦粉，实则还是得他的口感更加丰富。同时
      他也有膳食纤维，这意味这=这他不仅仅是美味，还有益于人体健康。总体来说口感非常好，他的健康价值是非常高。对于那些想吃得更健康的人来说，这是一个非常好的选择。</div>
      <div class="sypj">食用评价</div>
      <div class="sypj">食用效果</div>
        <div class="xg">
          <div>食用时间</div>
          <div>2023年06月18日 14:18</div>
        </div>
        <div class="xg">
          <div>餐前血糖</div>
          <div>16:18 5.2mmol/L</div>
        </div>
        <div class="xg">
          <div>餐后2小时血糖</div>
          <div>18:18 6.2mmol/L</div>
        </div>
        <div class="xg">
          <div>血糖波动</div>
          <div>0.9</div>
        </div>
      <div class="jctj">精彩推荐</div>
      <div class="jctjsp">

      </div>
      <div class="jctj">全部评论<span>0</span></div>
      <div class="pl">暂无评论</div>
      </div>

  </div>
</template>

<script>
export default {
  name: "Article",
  data() {
    return {
      swiperList: []
    }
  },
  mounted() {
  },
  methods: {
    goBack(){
      this.$router.go(-1)
      // getInfoFromVue.postMessage('goback')
    }
  }
}
</script>

<style scoped lang="less">
.main {
  .swiper {
    height: 300px;
    background-color: #f0f0f0;
    position: relative;
  }

  .product {
    position: absolute;
    bottom: 10px;
    left: 10px;
    border-radius: 8px;
    width: 180px;
    height: 50px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    font-size: 12px;

    img {
      width: 30px;
      height: 30px;
    }

    .desc {
      margin-left: 10px;

      :nth-child(2) {
        margin-top: 5px;
      }
    }

  }

  .content {
    padding: 10px;
    .title {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .yuan {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: #f0f0f0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .info{
        margin-left:10px;
        :nth-child(1){
          font-size: 15px;
          font-weight: bold;
        }
        :nth-child(2){
          font-size: 10px;
          color: gray;
        }
      }
      .btn{
        margin-left: auto;
        font-size: 12px;
        width: 60px;
        height: 20px;
        line-height: 20px;
        border-radius: 5px;
        background-color: #55a532;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .desc{
      padding-top: 5px;
      font-weight: bold;
      font-size: 15px;
    }
    .pj{
      font-size: 13px;
      padding-top: 10px;
    }
    .sypj{
      width: 65px;
      height: 25px;
      background-color: #f0f0f0;
      font-size: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 2px;
      border-radius: 5px;
      margin-top: 10px;
    }
    .xg{
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      padding-top: 15px;
      :nth-child(1){
        color:gray;
      }
      :nth-child(2){
        color: #55a532;
      }
    }
    .jctj{
      font-size: 12px;
      font-weight: bold;
      padding-top: 20px;
      padding-bottom: 10px;
    }
    .pl{
      height: 200px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #55a532;

    }
  }
}
</style>